{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" href="{% static 'css/funcpage.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <title>Hy数据可视化系统</title>
</head>
<body>
    <div class="top-info">
        <h1 onclick="returnHome()">Hy-DVS</h1>
        <h2 style="margin-left: 40px;margin-top: 20px" onclick="showContent('home')">首页</h2>
        <h2 style="margin-left: 40px;margin-top: 20px" onclick="showContent('data')">数据获取</h2>
        <h2 style="margin-left: 40px;margin-top: 20px" onclick="showContent('visible')">数据可视化</h2>
        <h2 style="margin-left: 40px;margin-top: 20px" onclick="showContent('info')">我的信息</h2>
    </div>
    <div id="homeContent" style="display: none;">
        <h2>首页内容</h2>
    </div>
    <div id="dataContent" style="display: none;">
        <div class="mulu">
            <h2>数据获取内容</h2>
            <h2>豆瓣</h2>
            <h2>微博</h2>
        </div>
        
        <!-- <div>
            <ul>
                <li>豆瓣</li>
                <li>微博</li>
            </ul>
        </div> -->
    </div>
    <div id="visibleContent" style="display: none;">
        <h2>数据可视化内容</h2>
    </div>
    <div id="infoContent" style="display: none;">
        <h2>我的信息内容</h2>
    </div>

    <script>
        function showContent(contentId) {
            // 隐藏所有内容区域
            document.querySelectorAll('[id$="Content"]').forEach(function(element) {
                element.style.display = 'none';
            });
            // 显示对应的内容区域
            document.getElementById(contentId + 'Content').style.display = 'block';
        }
        function returnHome() {
            window.location.href = 'http://localhost:8000/funcpage'; // 这里的路径需要根据你的实际情况来设置
        }
    </script>
</body>
</html>
